<template>
  <div @click="hiddenFloor" class="big-data-content">
    <div class="data-header">
      <div class="data-header-content">
        <div class="data-header-content-left">
          <div class="data-header-content-date">
            <div style="width: 160px">
              <span style="font-size: 20px">{{ time }}</span>
              <svg-icon :icon-class="weather" style="font-size: 24px;margin-left: 10px"/>
            </div>
          </div>
          <div style="width: 160px">
            <span>{{ week }}</span><span style="margin: 2px 5px">{{ today }}</span>
          </div>
        </div>
        <div class="data-header-content-left-tab">
          <div v-bind:class="{'tab-selected' : tabIndex === 1 , 'tab': tabIndex === 2 || tabIndex === 3}"
               @click.stop="tabChange(1)">
            <span style="font-size: 18px">概览</span>
            <div v-if="tabIndex === 1" class="data-header-tab-btn-bottom">
            </div>
          </div>
          <div v-bind:class="{'tab-selected' : tabIndex === 2 , 'tab': tabIndex === 1 || tabIndex === 3}"
               @click.stop="tabChange(2)">
            <span style="font-size: 18px">楼层</span>
            <div v-if="tabIndex === 2" class="data-header-tab-btn-bottom">
            </div>
          </div>
          <div v-bind:class="{'tab-selected' : tabIndex === 3 , 'tab': tabIndex === 1 || tabIndex === 2}"
               @click.stop="tabChange(3)">
            <span style="font-size: 18px">报表</span>
            <div v-if="tabIndex === 3" class="data-header-tab-btn-bottom">
            </div>
          </div>
        </div>
        <div class="data-header-content-title">
          <div class="data-header-content-title-left-img"/>
          <span class="data-header-content-title-name">智慧能源管理系统</span>
          <div class="data-header-content-title-right-img"/>
        </div>
        <div class="data-header-content-right">
          <div class="data-header-content-user">
            <div class="data-header-content-user-tag">
              <svg-icon icon-class="admin" style="font-size: 18px;"/>
            </div>
            <div class="data-header-content-name">
              <div>{{ user && user.nickName ? user.nickName : user && user.userName ? user.userName : '游客' }}</div>
              <div style="font-size: 10px">欢迎您使用！</div>
            </div>
          </div>
          <div class="data-header-content-logout">
            <div class="data-header-content-logout-btn"
                 @click.prevent="logout">
              <svg-icon icon-class="return" style="font-size: 14px;"/>
              <span class="data-header-content-logout-btn-text">退出</span>
            </div>
          </div>
        </div>
      </div>
      <div class="data-header-bottom"></div>
    </div>
    <div class="my-container" :style="{display:tabIndex  === 1 ? 'block': 'none'}">
      <div class="my-container-middle">
        <div class="my-container-middle-left">
          <div class="my-container-middle-left-device">
            <div class="my-container-middle-left-device-title">
              <div class="my-container-middle-left-device-title-tag"/>
              <div class="my-container-middle-left-device-title-name">设备总览</div>
            </div>
            <div class="my-container-middle-left-device-content">
              <div class="my-container-middle-left-device-content-outline">
                <div style="flex:1;height: 200px;">
                  <div class="circle-credit">
                    <div class="circle-container"
                         ref="myCircle">
                      <my-circle
                        :percent="building && building.onlineRate ? building.onlineRate : 0"
                        :stroke-width="3"
                        :trail-width="4"
                        trail-color="rgba(255,255,255,0.1)"/>
                    </div>
                    <div class="hemp-circle-content">
                      <div class="title" style="">在线率</div>
                      <div class="percent" style="">{{ building && building.onlineRate ? building.onlineRate : 0 }}%
                      </div>
                    </div>
                  </div>
                </div>
                <div class="my-container-middle-left-device-content-list">
                  <div class="my-container-middle-left-device-content-list-outline">
                    <div class="my-container-middle-left-device-content-list-item">
                      <div class="my-container-middle-left-device-content-list-item-img">
                        <img src="/static/img/4.png" alt="" style="width: 80px;height: 80px;"/>
                      </div>
                      <div class="my-container-middle-left-device-content-list-item-name"
                           style="display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;width: 100px">
                        <div style="font-size: 18px;margin: 8px 0;">设备总数</div>
                        <div><span
                          style="font-size: 30px;color: #6BD7DB;">{{
                            building && building.totalSize ? building.totalSize : 0
                          }}</span><span
                          style="font-size: 14px;margin-left: 8px;">台</span></div>
                      </div>
                    </div>
                    <div class="my-container-middle-left-device-content-list-item" style="margin: 30px 0;">
                      <div class="my-container-middle-left-device-content-list-item-img">
                        <img src="/static/img/6.png" alt="" style="width: 50px;height: 50px;"/>
                      </div>
                      <div class="my-container-middle-left-device-content-list-item-name">
                        <span style="font-size: 18px;margin: 8px 0;">在线总数</span>
                        <div><span
                          style="font-size: 30px;color: #6BD7DB;">{{
                            building && building.onlineSize ? building.onlineSize : 0
                          }}</span><span
                          style="font-size: 14px;margin-left: 8px">台</span></div>
                      </div>
                    </div>
                    <div class="my-container-middle-left-device-content-list-item">
                      <div class="my-container-middle-left-device-content-list-item-img">
                        <img src="/static/img/5.png" alt="" style="width: 50px;height: 50px;"/>
                      </div>
                      <div class="my-container-middle-left-device-content-list-item-name">
                        <span style="font-size: 18px;margin: 8px 0;">异常总数</span>
                        <div><span
                          style="font-size: 30px;color: rgb(220,22,17);">{{
                            building && building.exceptionSize ? building.exceptionSize : 0
                          }}</span><span
                          style="font-size: 14px;margin-left: 8px">台</span></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          style="height:100%;flex: 3;display: flex;align-items: center;justify-content: flex-start;flex-direction: column;margin-left: 1vh;">
          <div class="swipe" ref="mySwiper">
            <div class="swipe-container" :style="{ 'transform': `translateX(${offsetX}px)` }">
              <div class="swipe-item" v-for="(item,index) in building.floorList" v-if="building"
                   :style="{marginLeft: index !== 0 ? '1vh' : '0'}">
                <div class="swipe-item-content">
                  <div class="swipe-item-content-name">
                    <div class="swipe-item-content-tag" :style="{background: item.growthColor}"/>
                    <div style="margin: 0 10px 0 5px;font-size: 18px;">{{ item.name }}</div>
                  </div>
                  <img :src="item.growthImg" alt="" style="width: 100px;height: 30px;"/>
                </div>
                <div style="color: white;display: flex;justify-content: space-between;align-items: center;width: 100%;">
                  <div style="color: white;display: flex;justify-content: flex-start;align-items: center;height: 100%;">
                    <svg-icon icon-class="electricity-green" :style="[{fontSize: '40px'},{color: item.growthColor}]"/>
                    <div style="font-size: 24px;font-weight: bold;">{{ item.energy }}</div>
                    <div
                      style="font-size: 12px;height: 60%;display: flex;justify-content: flex-end;align-items: flex-end;margin:0 4px;">
                      kW·h
                    </div>
                  </div>
                  <div style="display: flex;align-items: flex-end;justify-content: flex-end;height: 60%;">
                    <div style="font-size: 14px;">{{ item.growthRate ? Number(item.growthRate) : 0 }}%</div>
                    <svg-icon icon-class="up" :style="[{fontSize: '14px'},{color: item.growthColor}]"/>
                  </div>
                </div>
              </div>
            </div>
            <div class="swipe-left" style="">
              <div class="swipe-left-action" @mousedown.prevent="swipeLeft">
                <span>《</span>
              </div>
            </div>
            <div class="swipe-right" style="">
              <div class="swipe-right-action" @mousedown.prevent="swipeRight">
                <span>》</span>
              </div>
            </div>
          </div>
          <div style="flex: 4;border: 2px solid rgb(66,112,162);border-radius: 10px;width: 100%;margin-top: 1vh;">
            <div
              style="height: 100%;width: 100%; background: url('/static/img/1.png');background-repeat: no-repeat;background-size: 100% 100%;position: relative">
              <div
                style="position: absolute;left: calc(40% - 30px);top: 10%;display: flex;justify-content: center;align-items: center;flex-direction: column;width: 20%;">
                <div style="color: white;font-size: 18px;">总用电量</div>
                <div style="color: #6BD7DBFF;font-size: 18px;font-weight: bold;margin-top: 5px;">
                  {{ building && building.energy ? building.energy : 0 }}kW·h
                </div>
              </div>
              <div v-if="building && building.floorList" v-for="(item,index) in building.floorList"
                   v-bind:class="[floorStyleConfig[index]]" @click.stop="openFloor(item,index)">
                <div style="color: white;font-weight: bold;font-size: 18px;">{{ item.name }}</div>
              </div>
              <div v-if="open" class="floor-dialog" :style="{left:left+'%', top:top+'%'}">
                <div class="floor-dialog-content">
                  <table style="width: 100%;height: 100%;">
                    <tr>
                      <td></td>
                      <td>A相</td>
                      <td>B相</td>
                      <td>C相</td>
                    </tr>
                    <tr>
                      <td>电压</td>
                      <td>{{ floorDetail.phaseAVoltage }}</td>
                      <td>{{ floorDetail.phaseBVoltage }}</td>
                      <td>{{ floorDetail.phaseCVoltage }}</td>
                    </tr>
                    <tr>
                      <td>电流</td>
                      <td>{{ floorDetail.phaseACurr }}</td>
                      <td>{{ floorDetail.phaseBCurr }}</td>
                      <td>{{ floorDetail.phaseCCurr }}</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        style="height: 46vh;width: 100%;display: flex;align-items: center;justify-content: flex-start;padding-top: 1vh;">
        <div style="flex: 1;height: 100%;border: 2px solid rgb(66,112,162);border-radius: 10px">
          <div
            style="height: 100%;width: 100%;padding: 5%;display: flex;flex-direction: column;justify-content: space-between;">
            <div style="display: flex;justify-content: flex-start;align-items: center;">
              <div style="width: 3px;height: 20px; background: #6BD7DB; "/>
              <div style="margin-left: 8px;color: white;font-size: 18px;">实时告警</div>
            </div>
            <div
              style="display: flex;align-items: flex-start;justify-content: flex-start;flex-direction: column;height: 100%;">
              <my-scroll-board :config="config" ref="myScrollBoard" style="width:100%;height:90%"/>
            </div>
            <div style="width: 100%;display: flex;justify-content: space-evenly;align-items: center">
              <div style="display: flex;justify-content: center;align-items: center">
                <div style="width: 15px;height: 15px;background: rgb(226,108,219);border-radius: 50%"></div>
                <div
                  style="display: flex;align-items: center;justify-content: center;flex-direction: column;margin-left: 8px;">
                  <div style="color: white">报警数量</div>
                  <div style="color: rgb(122,244,246)">{{ alarm ? alarm.totalSize : 0 }}</div>
                </div>
              </div>
              <div style="display: flex;justify-content: center;align-items: center">
                <div style="width: 15px;height: 15px;background: rgb(101,48,251);border-radius: 50%"></div>
                <div
                  style="display: flex;align-items: center;justify-content: center;flex-direction: column;margin-left: 8px;">
                  <div style="color: white">已处理数量</div>
                  <div style="color:  rgb(122,244,246)">{{ alarm ? alarm.checkSize : 0 }}</div>
                </div>
              </div>
              <div style="display: flex;justify-content: center;align-items: center">
                <div style="width: 15px;height: 15px;background: #e8e8e8;border-radius: 50%"></div>
                <div
                  style="display: flex;align-items: center;justify-content: center;flex-direction: column;margin-left: 8px;">
                  <div style="color: white">待处理</div>
                  <div style="color:  rgb(122,244,246)">{{ alarm ? alarm.uncheckSize : 0 }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          style="height:100%;flex: 3;display: flex;align-items: center;justify-content: flex-start;flex-direction: column;margin-left: 1vh;border: 2px solid rgb(66,112,162);border-radius: 10px;">
          <div
            style="height: 100%;width: 100%;padding: 1%;display: flex;flex-direction: column;justify-content: space-between;">
            <div style="display: flex;justify-content: flex-start;align-items: center;">
              <div style="width: 3px;height: 20px; background: #6BD7DB; "/>
              <div style="margin-left: 8px;color: white;font-size: 18px;">数据分析</div>
            </div>
            <div style="width: 100%;height: 100%;display: flex;justify-content: flex-start;align-items: center">
              <div
                style="height: 100%;flex: 1;display: flex;flex-direction: column;justify-content: space-evenly;align-items: center">
                <div
                  style="width: 80%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
                  <div
                    style="width: 100%; display: flex;align-items: center;justify-content: space-between;padding-bottom: 5px;color: white">
                    <span>近7天用电量</span>
                    <span
                      style="font-size: 24px;color: #6BD7DB; margin: 0 12px;">{{
                        statisticalData.r7d ? statisticalData.r7d : 0
                      }}</span>
                    <span>kW·h</span>
                  </div>
                  <div style="width: 95%;height: 1px;background: white;"></div>
                </div>
                <div
                  style="width: 80%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
                  <div
                    style="width: 100%; display: flex;align-items: center;justify-content: space-between;padding-bottom: 5px;color: white">
                    <span>近30天用电量</span>
                    <span
                      style="font-size: 24px;color: #6BD7DB; margin: 0 12px;">{{
                        statisticalData.r30d ? statisticalData.r30d : 0
                      }}</span>
                    <span>kW·h</span>
                  </div>
                  <div style="width: 95%;height: 1px;background: white;"></div>
                </div>
                <div
                  style="width: 80%;display: flex;flex-direction: column;align-items: center;justify-content: center">
                  <div
                    style="width: 100%;display: flex;align-items: center;justify-content: space-between;padding-bottom: 5px;color: white;">
                    <span>同比上月</span>
                    <span
                      style="font-size: 24px;color: #6BD7DB; margin: 0 12px;">{{
                        statisticalData.lm ? statisticalData.lm : 0
                      }}</span>
                    <span>kW·h</span>
                  </div>
                  <div style="width: 95%;height: 1px;background: white;"></div>
                </div>
              </div>
              <div
                style="height: 80%;width: 1px;background: linear-gradient(243deg,#01183d 0%,#70e2e2 51%,#01183d 100%);"></div>
              <div style="flex: 3;height: 100%;">
                <div style="height: 95%;width: 100%" id="charge"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="my-container" :style="{display:tabIndex  === 2 ? 'block': 'none'}">
      <div class="my-content">
        <div class="floor-left" v-if="building && building.floorList">
          <div v-for="(item,index) in building.floorList"
               v-bind:class="{'floor-left-btn floor-left-btn-active': index === floorIndex, 'floor-left-btn': index !== floorIndex}"
               @click.stop="chooseFloor(index)">
            <span>{{ item.name }}</span>
          </div>
        </div>
        <div class="floor-right">
          <div class="name">
            <span>{{ floorDetail.name }}</span>
          </div>
          <div class="total">
            <div>
              <span>设备总数</span><span
              style="margin: 0 12px;color:#00daff ">{{ floorDetail.totalSize }}</span><span>台</span>
            </div>
            <div>
              <span>在线</span><span
              style="margin: 0 12px;color:#00daff ">{{ floorDetail.onlineSize }}</span><span>台</span>
            </div>
            <div>
              <span>离线</span><span
              style="margin: 0 12px;color:#00daff ">{{
                floorDetail.totalSize - floorDetail.onlineSize
              }}</span><span>台</span>
            </div>
            <div>
              <span>异常</span><span
              style="margin: 0 12px;color:#00daff ">{{ floorDetail.exceptionSize }}</span><span>台</span>
            </div>
          </div>
          <div class="detail" :style="{padding: chargeDetailPadding}" ref="chargeDetail">
            <div v-for="(item,index) in floorDetail.roomList" :key="index" class="detail-container">
              <div class="detail-content"
                   :style="{ background:   item.exceptionSize > 0 ? 'url('+'/static/img/9.png'+') 0% 0% / contain no-repeat' : item.onliseSize === 0 ?  'url('+'/static/img/8.png'+') 0% 0% / contain no-repeat' : 'url('+'/static/img/7.png'+') 0% 0% / contain no-repeat'}"
                   @click.stop="openDetail(index)">
                <div style="font-size: 14px;color: #00daff">{{ item.name }}</div>
                <div style="font-size: 16px; font-weight: bold;color: white">{{ item.energy }}</div>
                <div style="font-size: 14px;color: white">kW.H</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="my-container" :style="{display:tabIndex  === 3 ? 'block': 'none'}">
      <div class="my-content">
        <div class="floor-left" v-if="building && building.floorList">
          <my-tree
            :data="building.floorList"
            :props="defaultProps"
            show-checkbox
            node-key="deviceId"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            accordion
            :default-expand-all="false"
            :default-expanded-keys="defaultExpandKeys"
            :highlight-current="true"
            @node-click="handleNodeClick"
            @check="handleNodeClick"
          />
        </div>
        <div class="floor-right report">
          <div class="report-header">
            <div class="report-header-name">
              <svg-icon icon-class="room" style="font-size: 24px;margin-right: 5px;"/>
              <div style="display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;">
                <div v-for="item in reportDetail" style="display: flex;justify-content: center;align-items: center">
                  <span>{{ item && item.name ? item.name : '' }}</span>
                  <div class="report-header-separator"><span>》</span></div>
                  <div style="max-width: 70vw;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
                    {{ item.roomName }}
                  </div>
                </div>
              </div>
            </div>
            <div class="report-header-content">
              <div class="report-header-content-date">
                <div v-bind:class="{'date-active': dateType === 1 , 'date-inactive': dateType !== 1 }"
                     @click.prevent="dateTypeChange(1)"
                     style=" border-bottom-left-radius: 8px; border-top-left-radius: 8px;">
                  时
                </div>
                <div v-bind:class="{'date-active': dateType === 2 , 'date-inactive': dateType !== 2}"
                     @click.prevent="dateTypeChange(2)"
                     style="border-left: 1px solid #4270a2;border-right: 1px solid #4270a2;">
                  日
                </div>
                <div v-bind:class="{'date-active': dateType === 3 , 'date-inactive': dateType !== 3 }"
                     @click.prevent="dateTypeChange(3)"
                     style="border-bottom-right-radius: 8px;border-top-right-radius: 8px;">
                  月
                </div>
              </div>
              <div class="report-header-content-picker"
                   style="display: flex;align-items: center;justify-content: center;">
                <div>日期：</div>
                <el-date-picker
                  style="background: transparent;border: 1px solid #4270a2;border-radius: 12px;"
                  v-model="dateRange"
                  :type="dateType === 1 ? 'datetimerange' : dateType === 2 ? 'daterange': 'monthrange'"
                  range-separator="至"
                  clearable
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :start-placeholder="dateType === 1 ? '开始时间' : dateType === 2 ? '开始日期': '开始月份'"
                  :end-placeholder="dateType === 1 ? '结束时间' : dateType === 2 ? '结束日期': '结束月份'"/>
                <el-button icon="el-icon-search" @click.prevent="reportQuery" class="report-header-content-query"
                           :disabled="querying">
                  搜索
                </el-button>
              </div>
              <div class="report-tab">
                <div v-bind:class="{'tab-active' : reportTabIndex === 1, 'tab-inactive': reportTabIndex !== 1}"
                     @click.prevent="reportTabChange(1)"
                     style="display: flex;justify-content: center;align-items: start">
                  <span>用电量</span>
                  <el-button icon="el-icon-download"
                             style="background: transparent;color: #00daff; border: 1px solid #00daff;padding: 2px 6px;margin-left: 5px;" @click.prevent="reportDownload"></el-button>
                </div>
                <div v-bind:class="{'tab-active' : reportTabIndex === 2, 'tab-inactive': reportTabIndex !== 2}"
                     @click.prevent="reportTabChange(2)"
                     style="margin: 0 12px">
                  功率
                </div>
                <div v-bind:class="{'tab-active' : reportTabIndex === 3, 'tab-inactive': reportTabIndex !== 3}"
                     @click.prevent="reportTabChange(3)" style="margin-right:12px;" v-if="roomCheckedKeys.length === 1">
                  相电流
                </div>
                <div v-bind:class="{'tab-active' : reportTabIndex === 4, 'tab-inactive': reportTabIndex !== 4}"
                     @click.prevent="reportTabChange(4)" v-if="roomCheckedKeys.length === 1">
                  相电压
                </div>
              </div>
            </div>
          </div>
          <div style="width: 100%;height: 100%;">
            <div style="height: 95%;width: 100%" id="report"></div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showDetail" class="room-detail-container">
      <div class="room-detail-content">
        <svg style="position: absolute;left: 0;right: 0; z-index: 999" width="100%" height="100%">
          <polyline style="stroke-width: 2;" stroke="rgb(104,210,253)" :points="`25 10, 10 10, 10 25, 10 10`"/>
          <polyline style="stroke-width: 2;" stroke="rgb(104,210,253)" :points="`1022 10, 1037 10, 1037 25`"/>
          <polyline style="stroke-width: 2;" stroke="rgb(104,210,253)" :points="`1022 485, 1037 485, 1037 470`"/>
          <polyline style="stroke-width: 2;" stroke="rgb(104,210,253)" :points="`25 485, 10 485, 10 470`"/>
        </svg>
        <div class="room-detail-header">
          <div class="room-detail-header-name">
            <span style="font-size: 20px;">{{ roomDetail.name }}</span>
            <div class="room-detail-header-status"/>
            <span>{{ roomDetail.onlineSize > 0 ? '在线' : '离线' }}</span>
          </div>
          <div class="room-detail-header-close"
               @click.stop="closeDetail">X
          </div>
        </div>
        <div class="room-detail-main">
          <div class="room-detail-main-item">
            <div>A相电压</div>
            <div class="room-detail-main-item-num">
              <div style="font-size: 24px; ">{{ roomDetail.phaseAVoltage.toFixed(0) }}</div>
              <div class="room-detail-main-item-tag">V</div>
            </div>
          </div>
          <div
            class="room-detail-main-item">
            <div>B相电压</div>
            <div class="room-detail-main-item-num">
              <div style="font-size: 24px; ">{{ roomDetail.phaseBVoltage.toFixed(0) }}</div>
              <div class="room-detail-main-item-tag">V</div>
            </div>
          </div>
          <div
            class="room-detail-main-item">
            <div>C相电压</div>
            <div class="room-detail-main-item-num">
              <div style="font-size: 24px; ">{{ roomDetail.phaseCVoltage.toFixed(0) }}</div>
              <div class="room-detail-main-item-tag">V</div>
            </div>
          </div>
          <div
            class="room-detail-main-item">
            <div>合相有功功率</div>
            <div class="room-detail-main-item-num">
              <div style="font-size: 24px; ">{{ roomDetail.positivePower }}</div>
              <div class="room-detail-main-item-tag">KW</div>
            </div>
          </div>
          <div
            class="room-detail-main-item">
            <div>正向有功总电能</div>
            <div class="room-detail-main-item-num">
              <div style="font-size: 24px;">{{ roomDetail.positiveEnergy }}</div>
              <div class="room-detail-main-item-tag">kW.H</div>
            </div>
          </div>
          <div
            class="room-detail-main-item">
            <div>A相电流</div>
            <div class="room-detail-main-item-num">
              <div style="font-size: 24px;">{{ roomDetail.phaseACurr }}</div>
              <div class="room-detail-main-item-tag">A</div>
            </div>
          </div>
          <div
            class="room-detail-main-item">
            <div>B相电流</div>
            <div class="room-detail-main-item-num">
              <div style="font-size: 24px;">{{ roomDetail.phaseBCurr }}</div>
              <div class="room-detail-main-item-tag">A</div>
            </div>
          </div>
          <div
            class="room-detail-main-item">
            <div>C相电流</div>
            <div class="room-detail-main-item-num">
              <div style="font-size: 24px;">{{ roomDetail.phaseCCurr }}</div>
              <div class="room-detail-main-item-tag">A</div>
            </div>
          </div>
          <div
            class="room-detail-main-item">
            <div>合相无功功率</div>
            <div class="room-detail-main-item-num">
              <div style="font-size: 24px; ">{{ roomDetail.negativePower }}</div>
              <div class="room-detail-main-item-tag">KW</div>
            </div>
          </div>
          <div
            class="room-detail-main-item">
            <div>反向有功总电能</div>
            <div class="room-detail-main-item-num">
              <div style="font-size: 24px;">{{ roomDetail.negativeEnergy }}</div>
              <div class="room-detail-main-item-tag">kW.H</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading ref="loading"/>
  </div>
</template>

<script>
import CircleBar from "@/components/CircleBar/index.vue";
import MyCircle from "@/components/MyCircle/index.vue";
import HempCircle from "@/components/XCircle/index.vue";
import MyScrollBoard from "@/components/MyScrollBoard/index.vue";
import * as echarts from 'echarts/core';
import {GridComponent, LegendComponent, TitleComponent, TooltipComponent} from 'echarts/components';
import {LineChart} from 'echarts/charts';
import {UniversalTransition} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';
import axios from "axios";
import {getUserProfile} from "@/api/system/user";
import {getAlarm, getMain, getRoomData, getStatisticalData} from "@/api/main";
import Loading from "@/components/Loading/index.vue"
import MyTree from "@/components/MyTree/index.vue";
import da from "element-ui/src/locale/lang/da";

export default {
  name: "Index",
  components: {
    MyScrollBoard,
    HempCircle,
    MyCircle,
    CircleBar,
    Loading,
    MyTree
  },
  data() {
    return {
      user: {},
      time: '',
      today: '',
      week: '',
      weather: '',
      weatherCount: 1,
      tabIndex: 1,
      floorIndex: 0,
      scrollWith: 0,
      mySwiper: null,
      chargeDetailPadding: 0,
      circleWith: 0,
      offsetX: 0,
      building: {},
      floorDetail: {},
      roomDetail: {},
      open: false,
      showDetail: false,
      left: 0,
      top: 0,
      alarm: null,
      config: {
        header: ['设备', '告警项', '时间'],
        headerBGC: '#ffffff00',
        oddRowBGC: '#ffffff00',
        evenRowBGC: 'rgb(24,33,77)',
        headerHeight: '50',
        columnWidth: ['20%', '30%', '50%'],
        align: ['center', 'center', 'center'],
        data: []
      },
      floorStyleConfig: [
        'floorImg0', 'floorImg1', 'floorImg2', 'floorImg3', 'floorImg4', 'floorImg5', 'floorImg6', 'floorImg7',
      ],
      floorNamePosition: [
        {x: 13, y: 73},
        {x: 19, y: 58},
        {x: 25, y: 43},
        {x: 32, y: 28},
        {x: 40, y: 18},
        {x: 63, y: 30},
        {x: 71, y: 50},
        {x: 79, y: 71}
      ],
      _beforeUnload_time: '',
      _gap_time: '',
      statisticalData: {
        r7d: 0,
        r30d: 0,
        lm: 0,
        day: []
      },
      defaultProps: {
        children: "roomList",
        label: "name"
      },
      floorOptions: [
        {
          label: "B1",
          children: [
            {
              label: "B101",
            },
            {
              label: "B102"
            }
          ]
        },
        {
          label: "1F",
          children: [
            {
              label: "101",
            },
            {
              label: "102"
            }
          ]
        }
      ],
      dateType: 1,
      dateRange: [],
      reportTabIndex: 1,
      reportDetail: null,
      defaultExpandKeys: [],
      querying: false,
      roomCheckedKeys: [],
      xData: {
        energy: [],
        power: [],
        vol: [],
        curr: []
      },
      seriesData: {
        energy: [],
        power: [],
        vol: [],
        curr: []
      },
      reportXData:{
        energy: [],
        power: [],
        vol: [],
        curr: []
      },
      reportSeriesData:{
        energy: [],
        power: [],
        volA: [],
        volB: [],
        volC: [],
        currA: [],
        currB: [],
        currC: []
      }
    }
  },
  created() { // 显示加载动画
    this.getUser();
    this.getMainData();
    this.getAlarmList();
    this.getStatisticalData();
    this.getDateInfo();
    this.getUserLocationWeather();
    let _this = this;
    setInterval(() => {
      _this.getDateInfo();
      _this.weatherCount++;
      if (_this.weatherCount === 1800) {
        _this.getUserLocationWeather();
        _this.weatherCount = 0;
      }
    }, 1000);
  },
  mounted() {
    this.$nextTick(() => {
      const that = this;
      window.screenWidth = document.documentElement.clientWidth; //实时宽度
      window.screenHeight = document.documentElement.clientHeight; //实时高度
      that.scrollWith = window.screenHeight * 0.01 + 300;
      this.circleWith = this.$refs.myCircle.offsetWidth;
      window.onresize = () => {
        return (() => {
          window.screenWidth = document.documentElement.clientWidth; //实时宽度
          window.screenHeight = document.documentElement.clientHeight; //实时高度
          console.log(this.screenWidth, this.screenHeight);
          that.screenWidth = window.screenWidth;
          that.screenHeight = window.screenHeight;
          that.scrollWith = window.screenHeight * 0.01 + 300;
          const detailWidth = that.$refs.chargeDetail.offsetWidth;
          let count = Math.floor(detailWidth / 120);
          let paddingWith = (detailWidth - count * 120) / 2;
          that.chargeDetailPadding = '1vh ' + paddingWith + 'px 1vh ' + paddingWith + 'px';
          that.circleWith = that.$refs.myCircle.offsetWidth;
        })();
      };
    });
    window.addEventListener('beforeunload', (e) => {
      this._beforeUnload_time = new Date().getTime()
      console.log(this._beforeUnload_time, 'this._beforeUnload_time')
    })
    window.addEventListener('unload', () => {
      this._gap_time = new Date().getTime() - this._beforeUnload_time
      console.log(this._gap_time, 'ssss', new Date().getTime(), this._beforeUnload_time)
      if (this._gap_time <= 5) {
        //关闭
        console.log("关闭浏览器")
      } else {
        // 刷新
        console.log("刷新浏览器")
        localStorage.setItem("myTest", "xxxxxxx");
      }
    })
  },
  destroyed() {
    window.removeEventListener('beforeunload')
    window.removeEventListener('unload')
  },
  methods: {
    getMainData() {
      getMain("24134").then(res => {
        this.building = res.data;
        let floorList = [];
        if (this.building.floorList) {
          this.building.floorList.forEach(item => {
            if (item.growthRate) {
              if (item.growthRate <= 0) {
                item.growthColor = '#A5F071'
                item.growthImg = '/static/img/g-1.png'
              } else if (item.growthRate < 20) {
                item.growthColor = '#75FBFDFF';
                item.growthImg = '/static/img/g-2.png'
              } else if (item.growthRate < 50) {
                item.growthColor = '#F4B654FF';
                item.growthImg = '/static/img/g-3.png'
              } else if (item.growthRate < 100) {
                item.growthColor = '#EE7DDDFF';
                item.growthImg = '/static/img/g-4.png'
              } else {
                item.growthColor = '#A5F071';
                item.growthImg = '/static/img/g-1.png';
              }

            } else {
              item.growthColor = '#A5F071';
              item.growthImg = '/static/img/g-1.png';
            }
          })
        }
        this.floorDetail = this.building.floorList[0];
        this.$refs.loading.hide();
      })
    },
    getAlarmList() {
      getAlarm("24134").then(res => {
        this.alarm = res.data;
        let configData = [];
        this.alarm.faultList.forEach(item => {
          item.faultName = item.faultName.replace(item.deviceName, '');
          configData.push([item.deviceName, item.faultName, item.createTime])
        })
        // this.config.data = configData;
        this.$refs['myScrollBoard'].updateRows(configData)
      })
    },
    getStatisticalData() {
      getStatisticalData("24134").then(res => {
        this.statisticalData = res.data;
        let sevenDay = this.statisticalData.day;
        if (sevenDay) {
          this.setEcharts(sevenDay);
        }
      })
    },
    setEcharts(sevenDay) {
      let xData = [];
      let seriesData = [];
      sevenDay.forEach(item => {
        xData.push(item.date);
        seriesData.push(item.data);
      })
      const option = {
        title: {},
        tooltip: {},
        legend: {
          data: [{
            name: "近7天用电量",
            icon: 'roundRect',
            show: true,
            textStyle: {
              color: '#FFF',
              fontSize: 18,
            }
          }
          ]
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData,
          axisLine: {
            show: true,        // 确保轴线显示
            lineStyle: {
              color: '#333', // 轴线颜色
              width: 1       // 轴线宽度
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,        // 确保轴线显示
            lineStyle: {
              color: '#333', // 轴线颜色
              width: 1       // 轴线宽度
            }
          }
        },
        series: [
          {
            name: '近7天用电量',
            data: seriesData,
            type: 'line',
            areaStyle: {}
          }
        ]
      };

      echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        LegendComponent, LineChart, CanvasRenderer, UniversalTransition]);
      this.$nextTick(() => {
        const chartDom = document.getElementById('charge');
        const myChart = echarts.init(chartDom);
        myChart.setOption(option);
      });
    },
    openFloor(item, index) {
      let position = this.floorNamePosition[index];
      let left = position.x;
      let top = position.y;
      this.open = true;
      this.left = left + 3;
      this.top = top - 13;
      this.floorDetail = item;
    },
    hiddenFloor() {
      this.open = false;
    },
    swipeLeft() {
      const width = this.$refs.mySwiper.offsetWidth;
      console.log('元素宽度:', width);
      const count = Math.floor(width / this.scrollWith);
      console.log("可以容纳：", count)
      if (Math.abs(this.offsetX) / this.scrollWith < this.building.floorList.length - count) {
        this.offsetX = (this.offsetX - this.scrollWith);
        console.log('移动宽度:', this.offsetX);
      }
    },
    swipeRight() {
      if (this.offsetX <= -this.scrollWith) {
        this.offsetX = (this.offsetX + this.scrollWith);
      } else {
        this.offsetX = 0;
      }
    },
    tabChange(tab) {
      this.tabIndex = tab;
      if (tab === 2) {
        this.floorDetail = this.building.floorList[0];
        this.$nextTick(() => {
          const detailWidth = this.$refs.chargeDetail.offsetWidth;
          let count = Math.floor(detailWidth / 120);
          let paddingWith = (detailWidth - count * 120) / 2;
          paddingWith = paddingWith - 5;
          this.chargeDetailPadding = '1vh ' + paddingWith + 'px 1vh ' + paddingWith + 'px';
        })
      } else if (tab === 3) {
        this.defaultExpandKeys = [this.building.floorList[0].roomList[0].deviceId];
        this.$refs.tree.setCheckedKeys([this.building.floorList[0].roomList[0].deviceId])
        this.roomCheckedKeys = this.$refs.tree.getCheckedKeys(true);
        this.reportDetail = [];
        let checkedNodes = this.$refs.tree.getCheckedNodes(false, true);
        checkedNodes.forEach(node => {
          if (node.roomList) {
            let it = {
              name: node.name,
              roomName: null,
            }
            node.roomList.forEach(item => {
              if (this.roomCheckedKeys.includes(item.deviceId)) {
                if (it.roomName) {
                  it.roomName += "," + item.name
                } else {
                  it.roomName = item.name
                }
              }
            })
            this.reportDetail.push(it)
          }
        })
        let now = new Date();
        let nowStr = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
        this.dateRange = [nowStr + " 00:00:00", nowStr + " " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds()];
        let _this = this;
        setTimeout(() => {
          _this.getRoomData();
        }, 100)
      }
    },
    getRoomData() {
      this.querying = true;
      let checkedKeys = this.$refs.tree.getCheckedKeys(true);
      this.$refs.loading.show();
      let startDateTime = this.dateRange[0];
      let endDateTime = this.dateRange[1];
      startDateTime = this.formatDate(startDateTime);
      endDateTime = this.formatDate(endDateTime);
      getRoomData({
        deviceIds: checkedKeys.join(),
        startDateTime: startDateTime,
        endDateTime: endDateTime,
        dateType: this.dateType === 1 ? "hours" : this.dateType === 2 ? 'days' : 'months'
      }).then(res => {
        this.querying = false;
        console.log(res)
        this.$refs.loading.hide();
        this.setReportData(res.data)
      }).finally(() => {
        this.querying = false;
        this.$refs.loading.hide();
      })
    },
    formatDate(dateStr) {
      let date = new Date(dateStr);

      function pad(number) {
        return number < 10 ? '0' + number : number;
      }

      return (
        date.getFullYear() +
        '-' +
        pad(date.getMonth() + 1) +
        '-' +
        pad(date.getDate()) +
        " " +
        pad(date.getHours()) +
        ":" +
        pad(date.getMinutes()) +
        ":" +
        pad(date.getSeconds())
      );
    },
    openDetail(index) {
      this.showDetail = true;
      this.roomDetail = this.floorDetail.roomList[index];
    },
    closeDetail() {
      this.showDetail = false;
    },
    chooseFloor(index) {
      this.floorIndex = index;
      this.floorDetail = this.building.floorList[index];
    },
    getDateInfo() {
      const today = new Date();
      const year = today.getFullYear();
      let month = today.getMonth() + 1; // 月份是从0开始的，所以需要+1
      let day = today.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      const dayOfWeek = today.getDay(); // 星期几是0-6，0代表星期日

      let hour = today.getHours();
      let minutes = today.getMinutes();
      let second = today.getSeconds();

      if (hour < 10) {
        hour = "0" + hour;
      }
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (second < 10) {
        second = "0" + second;
      }
      // 将星期几转换为星期几的名字
      const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const dayName = daysOfWeek[dayOfWeek];
      this.today = year + '-' + month + '-' + day;
      this.week = dayName;
      this.time = hour + ":" + minutes + ":" + second;
    },
    getUserLocationWeather() {
      console.log('获取天气')
      axios.request({
        url: "http://v1.yiketianqi.com/api?unescape=1&version=v63&appid=15719263&appsecret=Yo4uA9wY",
        method: 'GET'
      }).then((res) => {
        console.log(res)
        //xue、lei、shachen、wu、bingbao、yun、yu、yin、qing
        let data = res.data
        let isDay = this.getDayOrNight(data.sunrise, data.sunset);
        this.weather = data.wea_img;
        if (data.wea_img === 'yun') {
          if (isDay) {
            this.weather = data.wea_img + "-d"
          } else {
            this.weather = data.wea_img + "-n"
          }
        }
      })
    },
    getDayOrNight(sunrise, sunset) {
      const date = new Date();
      const range = sunrise + '-' + sunset;
      // 将字符串转换为时间戳数组
      const times = range.split('-').map(t => {
        const parts = t.split(':');
        return Date.parse(date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + ' ' + t);
      });
      // 获取当前时间的时间戳
      const now = date.getTime();
      // 比较当前时间是否在时间段内
      return now > times[0] && now < times[1];
    },
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
      });
    },
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      }).catch(() => {
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data, node) {
      console.log(data, node);
      let checkedKeys = this.$refs.tree.getCheckedKeys();
      if (data.roomList && node.checked !== null) {
        if (!node.checked) {
          if (!checkedKeys.includes(data.deviceId)) {
            checkedKeys.push(data.deviceId);
          }
          data.roomList.forEach(item => {
            if (!checkedKeys.includes(item.deviceId)) {
              checkedKeys.push(item.deviceId);
            }
          })
        } else if (node.checked) {
          checkedKeys = checkedKeys.filter(it => it !== data.deviceId);
          data.roomList.forEach(item => {
            if (checkedKeys.includes(item.deviceId)) {
              checkedKeys = checkedKeys.filter(it => it !== item.deviceId);
            }
          })
        }
      } else if (!data.roomList && node.checked != null) {
        if (node.checked) {
          if (checkedKeys.includes(data.deviceId)) {
            checkedKeys = checkedKeys.filter(it => it !== data.deviceId);
            checkedKeys = checkedKeys.filter(it => it !== node.parent.data.deviceId)
          }
        } else {
          if (!checkedKeys.includes(data.deviceId)) {
            checkedKeys.push(data.deviceId);
          }
        }
      }
      this.$refs.tree.setCheckedKeys(checkedKeys);
      this.roomCheckedKeys = this.$refs.tree.getCheckedKeys(true);
      this.reportDetail = [];
      let checkedNodes = this.$refs.tree.getCheckedNodes(false, true);
      checkedNodes.forEach(node => {
        if (node.roomList) {
          let it = {
            name: node.name,
            roomName: null
          }
          node.roomList.forEach(item => {
            if (this.roomCheckedKeys.includes(item.deviceId)) {
              if (it.roomName) {
                it.roomName += "," + item.name
              } else {
                it.roomName = item.name
              }
            }
          })
          this.reportDetail.push(it)
        }
      })
    },
    dateTypeChange(type) {
      this.dateType = type;
      this.dateRange = [];
      this.reportTabIndex = 1;
    },
    reportQuery() {
      this.getRoomData();
    },
    reportTabChange(type) {
      this.reportTabIndex = type;
      this.reportShow();
    },
    setReportData(data) {
      this.reportXData = {
        energy: [],
        power: [],
        vol: [],
        curr: []
      };
      this.reportSeriesData = {
        energy: [],
        power: [],
        vol: [],
        curr: []
      };
      data.forEach(item => {
        if (item.energy) {
          let value = item.energy;
          if (value.time) {
            this.reportXData.energy = value.time;
          }
          if (value.value) {
            this.reportSeriesData.energy = [
              {
                name: '用电量',
                data: value.value,
                type: 'line',
                smooth: true
              }
            ]
          }
        } else if (item.power) {
          let value = item.power;
          if (value.time) {
            this.reportXData.power = value.time;
          }
          if (value.value) {
            this.reportSeriesData.power = [
              {
                name: '功率',
                data: value.value,
                type: 'line',
                smooth: true
              }
            ]
          }
        } else if (item.currA) {
          let value = item.currA;
          if (value.time) {
            this.reportXData.curr = value.time;
          }
          if (value.value) {
            if (this.reportSeriesData.curr.length === 0) {
              this.reportSeriesData.curr = [
                {
                  name: 'A相电流',
                  data: value.value,
                  type: 'line',
                  smooth: true
                }
              ]
            } else {
              this.reportSeriesData.curr.push(
                {
                  name: 'A相电流',
                  data: value.value,
                  type: 'line',
                  smooth: true
                })
            }
          }
        } else if (item.currB) {
          let value = item.currB;
          if (value.value) {
            if (this.reportSeriesData.curr.length === 0) {
              this.reportSeriesData.curr = [
                {
                  name: 'B相电流',
                  data: value.value,
                  type: 'line',
                  smooth: true
                }
              ]
            } else {
              this.reportSeriesData.curr.push(
                {
                  name: 'B相电流',
                  data: value.value,
                  type: 'line',
                  smooth: true
                })
            }
          }
        } else if (item.currC) {
          let value = item.currC;
          if (value.value) {
            if (this.reportSeriesData.curr.length === 0) {
              this.reportSeriesData.curr = [
                {
                  name: 'C相电流',
                  data: value.value,
                  type: 'line',
                  smooth: true
                }
              ]
            } else {
              this.reportSeriesData.curr.push(
                {
                  name: 'C相电流',
                  data: value.value,
                  type: 'line',
                  smooth: true
                })
            }
          }
        } else if (item.volA) {
          let value = item.volA;
          if (value.time) {
            this.reportSeriesData.vol = value.time;
          }
          if (value.value) {
            if (this.reportSeriesData.vol.length === 0) {
              this.reportSeriesData.vol = [
                {
                  name: 'A相电压',
                  data: value.value,
                  type: 'line',
                  smooth: true
                }
              ]
            } else {
              this.reportSeriesData.vol.push(
                {
                  name: 'A相电压',
                  data: value.value,
                  type: 'line',
                  smooth: true
                })
            }
          }
        } else if (item.volB) {
          let value = item.volB;
          if (value.value) {
            if (this.reportSeriesData.vol.length === 0) {
              this.reportSeriesData.vol = [
                {
                  name: 'B相电压',
                  data: value.value,
                  type: 'line',
                  smooth: true
                }
              ]
            } else {
              this.reportSeriesData.vol.push(
                {
                  name: 'B相电压',
                  data: value.value,
                  type: 'line',
                  smooth: true
                })
            }
          }
        } else if (item.volC) {
          let value = item.volC;
          if (value.value) {
            if (this.reportSeriesData.vol.length === 0) {
              this.reportSeriesData.vol = [
                {
                  name: 'C相电压',
                  data: value.value,
                  type: 'line',
                  smooth: true
                }
              ]
            } else {
              this.reportSeriesData.vol.push(
                {
                  name: 'C相电压',
                  data: value.value,
                  type: 'line',
                  smooth: true
                })
            }
          }
        }
      })
      this.reportShow();
    },
    reportShow() {
      let xShowData = [];
      let seriesShowData = [];
      switch (this.reportTabIndex) {
        case 1:
          xShowData = this.reportXData.energy;
          seriesShowData = this.reportSeriesData.energy;
          break;
        case 2:
          xShowData = this.reportXData.power;
          seriesShowData = this.reportSeriesData.power;
          break;
        case 3:
          xShowData = this.reportXData.curr;
          seriesShowData = this.reportSeriesData.curr;
          break;
        case 4:
          xShowData = this.reportXData.vol;
          seriesShowData = this.reportSeriesData.vol;
          break;
      }
      const option = {
        title: {},
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}'
        },
        legend: {
          left: 'center',
          top: 20,
          textStyle: {
            color: '#00daff',
            fontSize: 18,
          }
        },
        xAxis: {
          data: xShowData,
          axisLine: {
            show: true,        // 确保轴线显示
            lineStyle: {
              color: '#333', // 轴线颜色
              width: 1       // 轴线宽度
            }
          }
        },
        yAxis: {
          axisLine: {
            show: true,        // 确保轴线显示
            lineStyle: {
              color: '#333', // 轴线颜色
              width: 1       // 轴线宽度
            }
          }
        },
        series: seriesShowData
      };

      echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        LegendComponent, LineChart, CanvasRenderer, UniversalTransition]);
      this.$nextTick(() => {
        const chartDom = document.getElementById('report');
        const myChart = echarts.init(chartDom);
        myChart.clear();
        myChart.setOption(option);
      });
    },
    reportDownload() {

      let startDateTime = this.dateRange[0];
      let endDateTime = this.dateRange[1];
      startDateTime = this.formatDate(startDateTime);
      endDateTime = this.formatDate(endDateTime);
      let checkedKeys = this.$refs.tree.getCheckedKeys(true);
      const queryParams ={
        deviceIds: checkedKeys.join(),
        startDateTime: startDateTime,
        endDateTime: endDateTime,
        dateType: this.dateType === 1 ? "hours" : this.dateType === 2 ? 'days' : 'months'
      }
      let   fileName = this.dateType === 1 ? "按小时": this.dateType === 2 ? '按天' : '按月'
      fileName = fileName  + this.formatDateString(startDateTime) +"-" + this.formatDateString(endDateTime);
      fileName += new Date().getTime()
      this.download('app/energy/api/report', {
        ...queryParams
      }, `${fileName}.xlsx`)
    },
    formatDateString(dateStr){
      const  date = new Date(dateStr);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2,'0');
      const day = date.getDate();
      const hours = date.getHours();
      if (this.dateType === 1){
        return `${year}年${month}月${day}日${hours}时`;
      }else if (this.dateType === 2){
        return `${year}年${month}月${day}日`;
      }else if (this.dateType === 3){
        return `${year}年${month}月`;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
body {
  background: #ffffff;
}

.big-data-content {
  height: 100vh;
  width: 100%;
  background: rgb(1, 4, 47);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start
}

.data-header {
  height: 6vh;
  width: 100%;
}

.data-header-content {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.data-header-bottom {
  height: 7px;
  width: 100%;
  background: url('/static/img/3.png');
  background-size: 100% 100%
}

.data-header-content-left {
  width: 12vw;
  height: 100%;
  color: white;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.data-header-content-date {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-header-content-left-tab {
  width: 12vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00daff
}

.data-header-content-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  .data-header-content-title-left-img {
    height: 15px;
    width: 200px;
    background: url('/static/img/2.png');
    background-repeat: no-repeat;
    transform: rotateY(180deg);
  }

  .data-header-content-title-name {
    font-size: 30px;
    color: rgb(107, 215, 219);
    font-weight: bold;
    margin: 0 12px;
  }

  .data-header-content-title-right-img {
    height: 15px;
    width: 200px;
    background: url('/static/img/2.png');
    background-repeat: no-repeat
  }
}

.data-header-content-right {
  width: 24vw;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .data-header-content-user {
    flex: 3;
    display: flex;
    align-items: center;
    justify-content: center;

    .data-header-content-user-tag {
      padding: 10px;
      border: 2px solid rgb(17, 23, 63);
      border-radius: 50%;
    }

    .data-header-content-name {
      margin-left: 10px;
      color: white;
    }
  }

  .data-header-content-logout {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    .data-header-content-logout-btn {
      padding: 4px 12px;
      border: 2px solid rgb(17, 23, 63);
      border-radius: 18px;
      cursor: pointer;

      .data-header-content-logout-btn-text {
        color: white;
        font-size: 12px;
        margin-left: 3px;
      }
    }
  }
}

.data-header-tab-btn-bottom {
  position: absolute;
  left: 0;
  bottom: -30%;
  width: 100%;
  height: 20px;
  background: radial-gradient(#60c1f9 0%, rgba(96, 193, 249, 0.9) 20%, rgba(96, 193, 249, 0.8) 40%, rgba(96, 193, 249, 0.7) 60%, rgba(96, 193, 249, 0.02) 100%);
  border-radius: 50%;
}

.circle-credit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;

  .circle-container {
    position: absolute;
    //left: calc((100% - 200px) / 2);
    //top:20px;
    // transform:translate(-50%,-50%);
    width: 100%;
    height: 100%;
    //transform:rotate(-135deg);
    //-ms-transform:rotate(-135deg); /* Internet Explorer */
    //-moz-transform:rotate(-135deg); /* Firefox */
    //-webkit-transform:rotate(-135deg); /* Safari 和 Chrome */
    //-o-transform:rotate(-135deg); /* Opera */
  }

  .hemp-circle-content {
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .title {
      font-size: 20px;
      font-weight: bold;
    }

    .percent {
      font-size: 32px;
      margin-top: 10px;
      background: linear-gradient(to bottom, #c8d0ff, #6763d5);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  #scrollView {
    overflow: auto; /* 启用滚动条 */
    height: 200px; /* 设置滚动区域的高度 */
    width: 300px; /* 设置滚动区域的宽度 */
  }
}

.floor-dialog {
  height: 100px;
  width: 220px;
  position: absolute;
  border: 1px solid white;
  border-radius: 18px;
  background-color: rgba(26, 38, 113, 0.9);
  color: white;
}

.floor-dialog-content {
  width: 100%;
  height: 100%;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center
}

.swipe-left {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100px;
  background: transparent;

  .swipe-left-action {
    display: none;
    height: 100%;
    width: 100%;
    background: rgba(46, 46, 46, 0.51);
    font-size: 44px;
    color: rgba(153, 169, 191, 0.94);
    font-weight: bold;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  &:hover .swipe-left-action {
    display: flex;
  }
}

.swipe-right {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100px;
  background: transparent;

  .swipe-right-action {
    display: none;
    height: 100%;
    width: 100%;
    background: rgba(46, 46, 46, 0.51);
    font-size: 44px;
    color: rgba(153, 169, 191, 0.94);
    font-weight: bold;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  &:hover .swipe-right-action {
    display: flex;
  }
}

.swipe {
  height: 100%;
  width: calc(100vw - 25vw - 3vh);
  color: white;
  flex: 1;
  overflow: hidden;
  position: relative;

  .swipe-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    .swipe-item {
      height: 100%;
      width: 300px;
      border: 2px solid rgb(66, 112, 162);
      border-radius: 10px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
    }
  }
}

.swipe-item-content {
  width: 230px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .swipe-item-content-name {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .swipe-item-content-tag {
      width: 15px;
      height: 15px;
      border-radius: 50%
    }
  }
}

.tab-selected {
  background: #182b8a;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #182b8a;
  border-left: 1px solid #182b8a;
  border-bottom: 3px solid rgb(96, 193, 249);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.tab {
  background: transparent;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #182b8a;
  border-left: 1px solid #182b8a;
  cursor: pointer
}

.my-container {
  height: 94vh;
  width: 100%;
  padding: 1vh;

  .my-container-middle {
    height: 46vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .my-container-middle-left {
      flex: 1;
      height: 100%;
      border: 2px solid rgb(66, 112, 162);
      border-radius: 10px;

      .my-container-middle-left-device {
        height: 100%;
        width: 100%;
        padding: 5%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        .my-container-middle-left-device-title {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .my-container-middle-left-device-title-tag {
            width: 3px;
            height: 20px;
            background: #6BD7DB;
          }

          .my-container-middle-left-device-title-name {
            margin-left: 8px;
            color: white;
            font-size: 18px;
          }
        }

        .my-container-middle-left-device-content {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;

          .my-container-middle-left-device-content-outline {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;

            .my-container-middle-left-device-content-list {
              flex: 1;
              display: flex;
              justify-content: center;
              align-items: center;

              .my-container-middle-left-device-content-list-outline {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                color: rgb(164, 164, 175);

                .my-container-middle-left-device-content-list-item {
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  .my-container-middle-left-device-content-list-item-img {
                    width: 80px;
                    height: 80px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  }

                  .my-container-middle-left-device-content-list-item-name {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: flex-start;
                    width: 100px
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.my-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%
}

.floor-left {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  border: 2px solid rgb(66, 112, 162);
  border-radius: 10px;
}

.floor-left-btn {
  width: 100%;
  height: 80px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  color: #00daff;
  font-size: 20px;
  cursor: pointer;
}

.floor-left-btn-active {
  background: rgb(28, 42, 125);
  border-bottom: 3px solid rgb(96, 193, 249);
}

.floor-right {
  flex: 4;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  height: 100%;
  border: 2px solid rgb(66, 112, 162);
  border-radius: 10px;
  margin-left: 1vh;

  .name {
    width: 100%;
    padding: 12px;
    border-bottom: 1px solid rgb(30, 49, 88);
    color: #00daff;
    font-size: 22px;
  }

  .total {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 24px 0;
    color: rgb(165, 165, 175);
    font-size: 20px;
  }

  .detail {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: auto;

    .detail-container {
      height: 120px;
      width: 120px;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;

      .detail-content {
        width: 110px;
        height: 110px;
        //background: url('/static/img/7.png');
        background-repeat: no-repeat;
        background-size: contain;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        cursor: default;
      }
    }
  }
}

::-webkit-scrollbar {
  display: none;
}

.floorImg0 {
  position: absolute;
  left: 13%;
  top: 73%;
  transform: rotate3d(0, 1, 1, -30deg);
  cursor: pointer
}

.floorImg1 {
  position: absolute;
  left: 19%;
  top: 58%;
  transform: rotate3d(0, 1, 1, -30deg);
  cursor: pointer
}

.floorImg2 {
  position: absolute;
  left: 25%;
  top: 43%;
  transform: rotate3d(0, 1, 1, -30deg);
  cursor: pointer
}

.floorImg3 {
  position: absolute;
  left: 32%;
  top: 28%;
  transform: rotate3d(0, 1, 1, -30deg);
  cursor: pointer
}

.floorImg4 {
  position: absolute;
  left: 40%;
  top: 18%;
  transform: rotate3d(0, 1, 1, -30deg);
  cursor: pointer
}

.floorImg5 {
  position: absolute;
  left: 63%;
  top: 30%;
  transform: rotate3d(0, 1, 1, 40deg);
  cursor: pointer
}

.floorImg6 {
  position: absolute;
  left: 71%;
  top: 50%;
  transform: rotate3d(0, 1, 1, 45deg);
  cursor: pointer
}

.floorImg7 {
  position: absolute;
  left: 79%;
  top: 71%;
  transform: rotate3d(0, 1, 1, 45deg);
  cursor: pointer
}

.room-detail-container {
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 0.64);
  position: fixed;
  left: 0;
  top: 0;
}

.room-detail-content {
  position: relative;
  height: 500px;
  width: 1052px;
  left: calc(50vw - 526px);
  top: 30%;
  border: 2px solid rgb(66, 112, 162);
  border-radius: 10px;
  background: rgba(2, 7, 48, 0.9);
  color: white;

  .room-detail-header {
    width: 100%;
    padding: 24px;
    border-bottom: 2px solid rgb(22, 31, 83);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .room-detail-header-name {
      display: flex;
      justify-content: center;
      align-items: center;

      .room-detail-header-status {
        margin-left: 24px;
        margin-right: 8px;
        width: 10px;
        height: 10px;
        background: green;
        border-radius: 50%;
      }
    }

    .room-detail-header-close {
      height: 30px;
      width: 30px;
      border: 1px solid white;
      border-radius: 30px;
      text-align: center;
      line-height: 30px;
      font-size: 20px;
      z-index: 1000;
      cursor: default
    }
  }

  .room-detail-main {
    width: 100%;
    height: 100%;
    padding: 24px;
    display: grid;
    grid-template-rows: repeat(2, 95px);
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    grid-template-columns: repeat(5, 180px);

    .room-detail-main-item {
      width: 100%;
      height: 95px;
      box-shadow: inset 0 0 30px rgb(27, 40, 94);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .room-detail-main-item-num {
        color: #00daff;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .room-detail-main-item-tag {
          font-size: 16px;
          margin-left: 5px;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-end;
        }
      }
    }
  }
}

.el-tree {
  width: 90%;
  height: 90%;
  background: transparent;
  color: white;
  overflow: scroll;
}

.el-tree span {
  font-size: 24px !important;
}

::v-deep .el-date-editor .el-range-separator {
  color: #00daff;
}

::v-deep .el-date-editor .el-range-input {
  background: transparent;
  color: #00daff;

}

::v-deep .el-date-editor .el-range-input::placeholder {
  color: #00daff;
}

::v-deep .el-date-editor .el-range__icon {
  color: #00daff;
}

.report {
  .report-header {
    height: 10%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border-bottom: 1px solid rgb(66, 112, 162);
    color: #00daff;
    padding: 5px 12px;

    .report-header-name {
      display: flex;
      align-items: center;
      justify-content: center;

      .report-header-separator {
        margin-left: 5px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center
      }
    }

    .report-header-content {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      width: 100%;
      margin-top: 12px;

      .report-header-content-date {
        border: 1px solid #4270a2;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 20%;

        .date-active {
          width: 100%;
          height: 36px;
          background: #00daff;
          color: #4270a2;
          text-align: center;
          line-height: 36px;
          cursor: pointer;
        }

        .date-inactive {
          width: 100%;
          height: 36px;
          text-align: center;
          line-height: 36px;
          cursor: pointer;
        }
      }

      .report-header-content-picker {
        display: flex;
        align-items: center;
        justify-content: center;

        .report-header-content-query {
          color: #00daff;
          background: transparent;
          border-radius: 8px;
          margin-left: 12px;
          border: 1px solid #4270a2;
          height: 32px;
          line-height: 32px;
          padding: 0 12px;
        }
      }

      .report-tab {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 25%;
        margin-right: 24px;

        .tab-active {
          flex: 1;
          height: 36px;
          border-bottom: 2px solid #00daff;
          text-align: center;
          cursor: pointer;
        }

        .tab-inactive {
          flex: 1;
          height: 36px;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
}
</style>

